@use "sass:map";
@use  './config.scss' as *;
@use  './function.scss' as *;
// @import '../common/var.scss';

// set css var value
// @include set-css-var-value(('color', 'primary'), red);
// --e-color-primary: red;
@mixin set-css-var-value($name, $value,$var: null) {
	/* #ifndef APP-NVUE */
	#{joinVarName($name)}: #{$value};
	/* #endif */
	
	/* #ifdef APP-NVUE */

	@if $var != null {
		#{$var}:#{$value};
	}
	
	/* #endif */
}

@mixin set-css-color-type-light($type, $i) {
  #{getCssVarName('color', $type, 'light', $i)}: #{map.get(
      $colors,
      $type,
      "light-#{$i}"
    )};
}
// 设置白天模式下主题颜色的变量 $i越大，颜色越浅
@mixin set-css-color-type($type) {
  #{getCssVarName('color', $type)}: #{map.get($colors, $type, "base")};
  @each $i in (3, 5, 7, 8, 9) {
    @include set-css-color-type-light($type, $i);
  }
  #{getCssVarName('color', $type, 'dark-2')}: #{map.get(
      $colors,
      $type,
      "dark-2"
    )};
}

@mixin set-css-var-type($name, $type, $variables) {
  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
}

// set all css var for component by map
@mixin set-component-css-var($name, $variables) {
  @each $attribute, $value in $variables {
    #{getCssVarName($name, $attribute)}: #{$value};
  }
}
// 设置颜色对应的rgb变量
@mixin set-css-color-rgb($type) {
  $color: map.get($colors, $type, "base");
  @include set-css-var-value(
    ("color", $type, "rgb"),
    #{red($color),
    green($color),
    blue($color)}
  );
}

// 根据传入的css变量生成新的css变量
// generate css var from existing css var
// for example:
// @include css-var-from-global(('button', 'text-color'), ('color', $type))
// --e-button-text-color: var(--e-color-#{$type});
@mixin css-var-from-global($var, $gVar) {
  $varName: joinVarName($var);
  $gVarName: joinVarName($gVar);
  #{$varName}: var(#{$gVarName});
}
